<template>
  <IFexHeaderMain>
    <template #header>
      <image :src="'/static/img/fc/form_title.png'" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
    </template>
    <view class="home_main wh_auto">
      <view style="background-color: #ffffff; margin: 40rpx 0">
        <view class="form_row">房地产权:</view>
        <view v-for="(item, index) in dataList" class="form_row" :key="index" :class="item.type == 'row' ? '' : 'flex_left_right'">
          <view class="info-label flex_left">{{ item.label }}</view>
          <view class="flex_right" v-if="!item.type">
            <view class="info-value" :style="item.valueStyle">{{ item.value }}</view>
          </view>
          <view v-if="item.type == 'row'">{{ item.value }}</view>
        </view>
      </view>
    </view>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import useUserInfoStore from '@/store/userInfo'
  import { onMounted, ref } from 'vue'
  const getUserStoreFun = (): any => {
    const userInfoStore = useUserInfoStore()
    console.log(userInfoStore.getDetailData)
    return userInfoStore.getDetailData
  }
  const dataList = ref<any>([
    { label: '区县代码', value: getUserStoreFun().qxdm },
    { label: '不动产权证号', value: getUserStoreFun().bdcqzh, valueStyle: { textAlign: 'left' } },
    { label: '不动产单元号', value: getUserStoreFun().bdcdyh, valueStyle: { textAlign: 'left' } },
    { label: '权属状态', value: getUserStoreFun().qszt },
    { label: '坐落', value: getUserStoreFun().zl, type: 'row' },
    { label: '房屋用途', value: getUserStoreFun().fwyt },
    { label: '房屋结构', value: getUserStoreFun().fwjg },
    { label: '建筑面积', value: getUserStoreFun().jzmj },
    { label: '分摊面积', value: getUserStoreFun().ftmj },
    { label: '其它建筑面积', value: getUserStoreFun().qtjzmj },
    { label: '所在层', value: getUserStoreFun().szc },
    { label: '总层数', value: getUserStoreFun().zcs },
    { label: '竣工时间', value: getUserStoreFun().jgsj },
    { label: '土地使用期限起始时间', value: getUserStoreFun().tdsyqxstart },
    { label: '土地使用期限起始时间', value: getUserStoreFun().tdsyqxend },
    { label: '房屋性质', value: getUserStoreFun().fwxz },
    { label: '权利人', value: getUserStoreFun().qlr },
    { label: '权利人证件号码', value: getUserStoreFun().qlridcard },
  ])
</script>

<style scoped lang="scss">
  .home_main {
    background: #f7f7f9;
    position: relative;
  }
  uni-image {
    height: auto;
  }
  .form_row {
    padding: 20rpx 0;
    text-align: left;
    border-bottom: 1px solid #f7f7f9;
    margin: 0 42rpx;
  }
  .info-label {
    color: #7f7f7f;
  }
  .info-value {
    color: #000000;
    width: 320rpx;
    text-align: right;
    float: right;
    word-break: break-all;
  }
</style>
